/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20230905
* @version:0.0.1
* @type:interface
* @description: 
* # SURIcon
* there are 2658 different icons in SURIcon from : https://github.com/bytedance/iconpark
* ## properties:
* - out property <bool> has-hover : has hover or not
* - in property <image> icon : icon source
* - in property <Themes> theme : Surrealism theme
* - in-out property <brush> icon-color : icon color 
* ## callbacks: 
* - callback clicked : run if you click the icon
* ## functions:
* - pure function get-icon(item:IconItem)->image : get icon src from for iter item ⛔
* ============================================
*/
import {IconItem,IconSources} from "./dev.slint";
import {ROOT_STYLES,Themes} from "../../themes/index.slint";

export component Icon inherits Rectangle {
  //default icon size
  height: get-icon()? 0 : ROOT-STYLES.sur-size.normal;
  width: get-icon()? 0 : ROOT-STYLES.sur-size.normal;
  padding: 0;
  //params
  out property <bool> has-hover<=>toucharea.has-hover;
  in property <image> icon : IconSources.icons.Null;
  in property <Themes> theme : Themes.Light;
  in-out property <brush> icon-color;
  // get icon src from for iter item
  pure public function get-icon()->bool {
    icon==@image-url("") ? true:false
  }

  callback clicked;
  clicked => {}
  states [
    light when theme == Themes.Light: {
      icon-color :ROOT-STYLES.sur-theme-colors.light.font;
      out{
        animate  * {
          duration: ROOT-STYLES.sur-an-duration;
          easing: ROOT-STYLES.sur-an-easing;
        }
      }
    }
    primary when theme == Themes.Primary: {
      icon-color :ROOT-STYLES.sur-theme-colors.primary.font;
      out{
        animate  * {
          duration: ROOT-STYLES.sur-an-duration;
          easing: ROOT-STYLES.sur-an-easing;
        }
      }
    }
    success when theme == Themes.Success: {
      icon-color :ROOT-STYLES.sur-theme-colors.success.font;
      out{
        animate  * {
          duration: ROOT-STYLES.sur-an-duration;
          easing: ROOT-STYLES.sur-an-easing;
        }
      }
    }
    info when theme == Themes.Info: {
      icon-color :ROOT-STYLES.sur-theme-colors.info.font;
      out{
        animate  * {
          duration: ROOT-STYLES.sur-an-duration;
          easing: ROOT-STYLES.sur-an-easing;
        }
      }
    }
    warning when theme == Themes.Warning: {
      icon-color :ROOT-STYLES.sur-theme-colors.warning.font;
      out{
        animate  * {
          duration: ROOT-STYLES.sur-an-duration;
          easing: ROOT-STYLES.sur-an-easing;
        }
      }
    }
    error when theme == Themes.Error: {
      icon-color :ROOT-STYLES.sur-theme-colors.error.font;
      out{
        animate  * {
          duration: ROOT-STYLES.sur-an-duration;
          easing: ROOT-STYLES.sur-an-easing;
        }
      }
    }
    dark when theme == Themes.Dark: {
      icon-color :ROOT-STYLES.sur-theme-colors.dark.font;
      out{
        animate  * {
          duration: ROOT-STYLES.sur-an-duration;
          easing: ROOT-STYLES.sur-an-easing;
        }
      }
    }
   
  ]
  toucharea:=TouchArea{
    mouse-cursor: pointer;
    clicked => {
      root.clicked()
    }
  }
  
  // for iter to match then get icon source
  img:=Image {
    source: icon;
    height: root.height;
    width: root.width;
    colorize: root.icon-color;
  }
}





